{{include template('public/header','admin')}}
<script src="/static/plugins/jquery/jquery.form.js"></script>
<link rel="stylesheet" type="text/css" href="/static/plugins/cropper/3.1.6/cropper.css">
<script type="text/javascript" src="/static/plugins/cropper/3.1.6/cropper.js"></script>
</head>
<body>
    <div class="container_box">
        <div class="container">
            <img id="image" src="{{$filepath}}">
        </div>
        <!-- 图片预览 -->
        <div class="preview">
            <div class="preview_img small_lg"></div>
            <div class="preview_img small_md"></div>
            <div class="preview_img small_sm"></div>
        </div>
        <div class="clearfix"></div>
        <form  action="" method="post" id="myform">
            <input type="hidden" name="filepath" value="{{$filepath}}">
            <input type="hidden" value="" name="x" />
            <input type="hidden" value="" name="y" />
            <input type="hidden" value="" name="w" />
            <input type="hidden" value="" name="h" />
        </form>
        <input type="hidden" name="new_filename" id="new_filename">
        <div class="bottom_button">
            <input type="button" class="btn btn-primary radius" id="determine" onclick="dosbumit()" value="&nbsp;&nbsp;确定&nbsp;&nbsp;">
            <input type="button" class="btn btn-default radius" id="cancel" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
        </div>
    </div>
    <script type="text/javascript">
        var index = parent.layer.getFrameIndex(window.name);
        init_crop();
        function init_crop() {
            $(".preview_img").html('<img src="' + $("#image").attr('src') + '">');
            $('.container > img').cropper({
                aspectRatio: '{{$smarty.get.spec}}',
                viewMode: 1,
                preview: '.preview_img',
                crop: function (data) {
                    $("input[name='x']").val(data.x);
                    $("input[name='y']").val(data.y);
                    $("input[name='w']").val(data.width);
                    $("input[name='h']").val(data.height);
                }
            });
        }
        function cropper_close() {
            var new_filename = $("#new_filename").val();
            parent.$("#{{$smarty.get.cid}}").val(new_filename);
            parent.$("#{{$smarty.get.cid}}_src").attr("src", new_filename);
            parent.layer.close(index);
        }
        function dosbumit() {
            $.ajax({
                type: 'POST',
                url: '/attachment/api/img_cropper',
                data: $("#myform").serialize(),
                dataType: "json",
                success: function (msg) {
                    if (msg.status == 1) {
                        $("#new_filename").val(msg.filepath);
                        layer.msg('保存成功!', {icon: 6, time: 1000});
                        setTimeout(cropper_close, 1500);
                    } else {
                        layer.alert('保存失败');
                    }
                }
            })
            return false;
        }

        $('#cancel').on('click', function () {
            parent.layer.close(index);
        });

    </script>
</body>
</html>
